<template>
<div class="card">
  <div class="card-header">
    <p class="card-title">{{ item.type | showType }}</p>
    <i class="card-status" :style='{color: statusColor, borderColor: statusColor}'>{{ item.status | showStatus }}</i>
  </div>
  <div class="card-detail">
    <p class="card-text">{{ item.text }}</p>
  </div>
  <div class="card-footer">
    {{ item.time | showTime }}
  </div>
</div>
</template>
<style>
.card {
  padding: .5rem;
  margin: .5rem;
  background: #fff;
  border-radius: 4px;
  box-shadow: 2px 2px 6px 0 #ccc;
}
.card-header {
  position: relative;
}
.card-title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 2rem;
}
.card-status {
  position: absolute;
  right: .5rem;
  top: 0;
  bottom: 0;

  box-sizing: content-box;
  height: 1.5rem;
  margin: auto 0;
  padding: 0 .5rem;
  border: 1px solid #da4654;
  border-radius: 3px;

  line-height: 1.5rem;
  vertical-align: middle;
}

.card-text {
  margin: 0 0 1rem;
  padding: 0;

  text-indent: .3rem;
  line-height: 24px;  
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;  
  color: #777;
}

.card-footer {
  padding-top: .5rem;
  border-top: 1px solid #ccc;  
}
</style>
<script>
import Moment from 'moment';
export default {
  filters: {
    showType(type) {
      const label = {
        0: '请假申请',
        1: '加班申请',
        2: '调休申请'
      };
      return label[type] || 'Unknown';
    },
    showStatus(status) {
      switch (status) {
        case 0:
          return '审批中';
        case 1:
          return '已审批';
        case -1:
          return '被拒绝';
        default:
          return 'Unkonwn';
      }
    },
    showTime(time) {
      return new Moment().format('LLLL');
    }
  },
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    statusColor() {
      const status = this.item.status;
      const colorLabel = {
        '-1': '#da4654',
        '0': '#027be3',
        '1': '#26a69a'
      };
      return colorLabel[status] || '#ffc107';
    }
  }
};
</script>

